<template>
	<view class="report">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'填写举报信息'"></Hearder>
		<!-- #endif -->
		<view class="every bgbottom">
			<view class="order_title">订单编号:{{detail.order_no}}</view>
			<view class="detail_con clearfix">
				<image :src="detail.goods_thumb"></image>
				<view class="detail_right">
					<view>
						<view>{{detail.goods_name}}</view>
						<view>{{detail.goods_no}}</view>
					</view>
					<view>￥{{detail.goods_price}}</view>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="bigtitle">举报原因</view>
			<view class="smlmain clearfix">
				<view :class="typename=='长时间不支付'?'active':''" @click="typeTab('长时间不支付')">长时间不支付</view>
				<view :class="typename=='支付金额不符'?'active':''" @click="typeTab('支付金额不符')">支付金额不符</view>
				<view :class="typename=='未收到款项'?'active':''" @click="typeTab('未收到款项')">未收到款项</view>
			</view>
		</view>
		<view class="jubao" @click="submit">提交举报</view>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:'',
				detail:{},
				typename:'长时间不支付',
				showLogin:false
			}
		},
		onLoad(options) {
			this.order_id = options.order_id || this.$route.query.order_id
			this.request('/order/getOrderReport',{order_id:this.order_id}).then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code==1){
					 this.detail = res.data.data
				}
			})
		},
		methods:{
			typeTab(t){
				this.typename=t
			},
			loginhidden(data){
				this.showLogin=data
			},
			submit(){
				this.request('/order/toOrderReport',{order_id:this.order_id,content_text:this.typename}).then(res => {
					if(res.data.code==1){
						this.$tip(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						this.$tip(res.data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.report{
		.every{
			padding: 0 4%;
			.order_title{
				height: 76rpx;
				border-bottom: $uni-border-bottom;
				font-size: 26rpx;
				line-height: 76rpx;
			}
			.detail_con{
				height: 200rpx;
				padding: 20rpx 0;
				>image{
					float: left;
					width: 200rpx;
					height: 100%;
					border-radius: 10rpx;
				}
				.detail_right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					float: left;
					width: calc(100% - 220rpx);
					height: 100%;
					margin-left: 20rpx;
					>view{
						&:first-of-type{
							view{
								&:first-of-type{
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								&:last-of-type{
									color: $uni-item-color;
									font-size: 24rpx;
									margin-top: 10rpx;
								}
							}
						}
						&:last-of-type{
							color: $uni-text-color;
							font-weight: 800;
						}
					}
				}
			}
		}
		.mainBox{
			padding: 0 4%;
			.bigtitle{
				font-weight: 800;
				padding-top: 30rpx;
			}
			.smlmain{
				width: calc(100% + 24rpx);
				view{
					float: left;
					width: 216rpx;
					height: 70rpx;
					font-size: 26rpx;
					background: #F5F5F5;
					text-align: center;
					line-height: 70rpx;
					margin-right: 20rpx;
					margin-top: 30rpx;
					border-radius: 4rpx;
					&.active{
						background: $uni-item-color;
						color: #fff;
					}
				}
			}
		}
		.jubao{
			height: 88rpx;
			line-height: 88rpx;
			background: $uni-item-color;
			font-weight: 800;
			text-align: center;
			box-shadow: 0 3rpx 14rpx 0 rgba(153, 153, 153, 0.52);
			border-radius: 4rpx;
			color: #fff;
			margin: 80rpx 4% 0;
		}
	}
</style>
